<template>
  <header>
    <div class="inner">
      <div class="header-logo" style=""><a href="/" title="返回首页">
        <img src="../assets/images/reg-login/logo.png" alt="logo">
      </a></div>
      <div class="header-link">
        <ul>
          <li>
            <a href="/chat"><span>消息</span></a>
          </li>
          <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
               aria-haspopup="true" aria-expanded="false">
              <span class="info-nickname">{{ getUserName }}</span><span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="/personal">个人中心</a></li>
              <li><a href="javascript:void(0);"
                     v-on:click="userExit">退出</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
  export default {
    computed: {
      getUserName() {
        return this.$store.state.user.nickname
      }
    },
    methods: {
      userExit() {
        $.cookie('loginToken', null);
        window.location.reload()
      }
    }
  }
</script>

<style>
  header {
    position: relative;
    z-index: 99;
    border-bottom: 1px solid #d3d8df;
    min-width: 1000px;
  }
  header .inner {
    width: 1000px;
    margin: 0 auto;
    height: 58px;
  }
  .header-logo {
    width: 155px;
    height: 45px;
    float: left;
    margin: 15px 0 0;
  }
  .header-link {

  }
  .header-link>ul {
    float: right;
  }
  .header-link>ul>li {
    margin-top: 22px;
    float: left;
    position: relative;
    width: 90px;
    text-align: center;
  }
</style>
